<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebRTC_demo</title>
    <link rel="stylesheet" href="/public/css/bootstrap.css">
    <link rel="stylesheet" href="/public/css/main.css">
</head>
<body>
    <div class="content_left">
        <div class="video_content">
            <video autoplay playsinline></video>
        </div>
        <!--  -->
        <div class="media_group">
            <div class="btn-group">
                <button type="button" class="btn btn-default" onclick="initCameraVideo()">图像源：摄像头</button>
                <button type="button" class="btn btn-default" onclick="initDesktopVideo()">图像源：桌面</button>
            </div>
            <div class="btn-group video_input_list">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    视频输入设备 <span class="caret"></span>
                </button>
                <ul class="dropdown-menu"></ul>
            </div>
            <div class="btn-group audio_input_list">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    音频输入设备 <span class="caret"></span>
                </button>
                <ul class="dropdown-menu"></ul>
            </div>
            <div class="btn-group filter_list">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    效果选择 <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="javascript:void(0)" data-type="none">无</a></li>
                    <li><a href="javascript:void(0)" data-type="blur">模糊</a></li>
                    <li><a href="javascript:void(0)" data-type="grayscale">灰度</a></li>
                    <li><a href="javascript:void(0)" data-type="invert">反色</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!--  -->
    <div class="content_right">
        <div class="connect_top">
            <div class="input-group">
                <span class="input-group-addon">用户名</span>
                <input type="text" class="form-control connect_name">
            </div>
            <div class="input-group">
                <span class="input-group-addon">房间号</span>
                <input type="text" class="form-control connect_room">
            </div>
            <button type="button" class="btn btn-default connect_button">点击连接</button>
            <button type="button" class="btn btn-default disconnect_button">断开连接</button>
        </div>
        <div class="connect_middle">
            <div class="message_title">当前房间人数为：0</div>
            <div class="message_content"></div>
        </div>
        <div class="connect_bottom">
            <input type="text" class="form-control send_content">
            <button type="button" class="btn btn-primary send_button">发送信息</button>
        </div>
    </div>
    <!-- WebRTC 兼容处理 -->
    <!-- <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script> -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script> -->
    <script src="/public/js/adapter-latest.js"></script>
    <script src="/public/js/socket.io.js"></script>
    <script src="/public/js/jquery.js"></script>
    <script src="/public/js/bootstrap.js"></script>
    <script src="/public/js/main.js"></script>
</body>
</html>